<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>ECharts-基本线性图及其配置要求</title>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>
    <script>
        // 获取到这个DOM节点，然后初始化

        var myChart = echarts.init(document.getElementById("box"));
        // var XData=["军工", "中行动力", "中行中机", "南方科技"];
        // var yData=[100,80,60,40];
        // XData.map(function(){
        //     yData.push((Math.random()*1000+100).toFixed(0))
        // })
        // var dataMin=parseInt(Math.min.apply(null, yData)/2);
        // for(var i=0;i<XData.length;i++){

        // }
        var data = [{
            "name": "军工",
            "value": 80
        }, {
            "name": "中行动力",
            "value": 87.8
        }, {
            "name": "中行中机",
            "value": 71
        }, {
            "name": "南方科技",
            "value": 80
        }];
        var xData = [],
            yData = [];
        var min = 0;
        data.map(function (a, b) {
            xData.push(a.name);
            if (a.value === 0) {
                yData.push(a.value + min);
            } else {
                yData.push(a.value);
            }
        });
        option = {
            backgroundColor: "#FFF",
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        opacity: 0
                    }
                },
                formatter: function (prams) {
                    if (prams[0].data === min) {
                        return "合格率：0%"
                    } else {
                        return "合格率：" + prams[0].data + "%"
                    }
                }
            },
            legend: {
                data: ['直接访问', '背景'],
                show: false
            },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '5%',
                top: '7%',
                height: '85%',
                containLabel: true,
                z: 22
            },
            xAxis: [{
                type: 'category',
                gridIndex: 0,
                data: xData,
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#F00'
                    }
                },
                axisLabel: {
                    show: true,
                    color: 'rgb(170,170,170)',
                    fontSize: 12
                }
            }],
            yAxis: [{
                type: 'value',
                gridIndex: 0,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                min: min,
                max: 100,
                axisLine: {
                    lineStyle: {
                        color: '#F00'
                    }
                },
                axisLabel: {
                    color: 'rgb(170,170,170)',
                    formatter: '{value} %'
                }
            },
            {
                type: 'value',
                gridIndex: 0,
                min: min,
                max: 100,
                splitNumber: 12,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                    }
                }
            }
            ],
            series: [{
                name: '合格率',
                type: 'bar',
                barWidth: '12px',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#5196D6'
                            },
                            // {
                            //     offset: 0.5,
                            //     color: '#027eff'
                            // },
                            {
                                offset: 1,
                                color: '#1C4F9C'
                            }
                        ]
                        )
                    }
                },
                data: yData,
                zlevel: 11

            },
                // {
                //     name: '背景',
                //     type: 'bar',
                //     barWidth: '50%',
                //     xAxisIndex: 0,
                //     yAxisIndex: 1,
                //     barGap: '-135%',
                //     data: [100, 100, 100, 100, 100, 100, 100],
                //     itemStyle: {
                //         normal: {
                //             color: 'rgba(255,255,255,0.1)'
                //         }
                //     },
                //     zlevel: 9
                // },

            ]
        };

        // option = {
        //     backgroundColor:"#080f15",
        //     xAxis: {
        //         axisTick: {
        //             show: false
        //         },
        //         splitLine: {
        //             show: false
        //         },
        //         splitArea: {
        //             show: false
        //         },
        //         data: xData,
        //         axisLabel: {
        //             formatter: function(value) {
        //                 var ret = ""; //拼接加\n返回的类目项
        //                 var maxLength = 1; //每项显示文字个数
        //                 var valLength = value.length; //X轴类目项的文字个数
        //                 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
        //                 if (rowN > 1) //如果类目项的文字大于3,
        //                 {
        //                     for (var i = 0; i < rowN; i++) {
        //                         var temp = ""; //每次截取的字符串
        //                         var start = i * maxLength; //开始截取的位置
        //                         var end = start + maxLength; //结束截取的位置
        //                         //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
        //                         temp = value.substring(start, end) + "\n";
        //                         ret += temp; //凭借最终的字符串
        //                     }
        //                     return ret;
        //                 } else {
        //                     return value;
        //                 }
        //             },
        //             interval: 0,
        //             fontSize: 16,
        //             fontWeight: 100,
        //             textStyle: {
        //                 color: '#9faeb5',

        //             }
        //         },
        //         axisLine: {
        //             lineStyle: {
        //                 color: '#4d4d4d'
        //             }
        //         }
        //     },
        //     yAxis: {
        //         axisTick: {
        //             show: false
        //         },
        //         splitLine: {
        //             show: false
        //         },
        //         splitArea: {
        //             show: false
        //         },
        //         min: 0,
        //         max:100,
        //         type: 'value',
        //         axisLabel: {
        //             textStyle: {
        //                 color: '#9faeb5',
        //                 fontSize: 16,
        //                 formatter: '{value} %'
        //             }
        //         },
        //         axisLine: {
        //             lineStyle: {
        //                 color: '#4d4d4d'
        //             }
        //         }
        //     },
        //     "tooltip": {
        //       "trigger": "item",
        //       "textStyle": {
        //         "fontSize": 12
        //       },
        //       "formatter": "{b0}:{c0}"
        //     },
        //     series: {
        //         type:"bar",
        //         barWidth: '30%',
        //         itemStyle: {
        //             normal: {
        //                 color: {
        //                     type: 'linear',
        //                     x: 0,
        //                     y: 0,
        //                     x2: 0,
        //                     y2: 1,
        //                     colorStops: [{
        //                         offset: 0,
        //                         color: '#5196D6' // 0% 处的颜色
        //                     }, {
        //                         offset: 1,
        //                         color: '#1C4F9C' // 100% 处的颜色
        //                     }],
        //                     globalCoord: false // 缺省为 false
        //                 },
        //                 barBorderRadius: 15,
        //             }
        //         },
        //         // barWidth: 7,
        //         data: yData
        //     }
        // };

        myChart.setOption(option);
    </script>
</body>

</html>